/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { PureComponent,Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    DrawerLayoutAndroid,
    ListView,
    Button,
    ScrollView,
    TouchableWithoutFeedback,
    navigationView,
    TouchableOpacity,
    Animated,
    Easing,
    TextInput,
    TimePickerAndroid,//时间组件
    ToastAndroid,//提示消息
    Vibration,//震动一下吧 嘿嘿
} from 'react-native';
import Contacts from 'react-native-contacts';
import Echarts from 'native-echarts';
import LocalStorage from '../storage/LocalStorage';
import {StyleModule, Screen, checkNum, onlyNum} from '../common';
import {NavigationItem, ALine} from '../widget';
//import ViewPager from 'react-native-viewpager'
export default class TestScene extends PureComponent{
    // static navigationOptions = ({navigation})=>({
    //     header:null,
    // });
    static navigationOptions = ({navigation}) => ({
        headerLeft: (
            <View>
               
            </View>
        ),
        headerTitle: (
            <View style={StyleModule.navigatorTitView}>
                <Text style={StyleModule.navigatorTitle}> 第三页面 </Text>
            </View>
        ),
        headerRight:(
            <View>

            </View>
        )
    });
    constructor(props) {
        super(props);
        this.state = {
            fadeInOpacity: new Animated.Value(0),
            rotation: new Animated.Value(0),
            fontSize: new Animated.Value(0),

            bite: [2, 4, 7, 2, 2, 7, 13, 16],
            rmb: [6, 9, 9, 2, 8, 7, 17, 18],

            data6: null,
            DataSource: [1, 2, 3, 4, 5, 6],
            cont:'我是主页面'
        } //初始值
    }

    componentDidMount() {
        var timing = Animated.timing;
        Animated.parallel(['fadeInOpacity', 'rotation', 'fontSize'].map(property => {
            return timing(this.state[property], {
                toValue: 1,
                duration: 1000,
                easing: Easing.linear
            });
        })).start();
        //test6
        fetch('http://www.imooc.com/api/teacher?type=4&num=30')
            .then((response) => response.json())
            .then((responseData) => {
                    this.setState({data6: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(responseData.data),})
                }
            ).catch((error) => {
            alert(err)
        })
    }

    //获取联系人
    test1() {
        return (<TouchableOpacity onPress={() => {
            Contacts.getAll((err, contacts) => {
                if (err === 'denied') {
                    alert('cuola')
                } else {
                    alert(JSON.stringify(contacts) + '1111111111111111')
                }
            })
        }}>
            <Text>555</Text>
        </TouchableOpacity>)
    }

    //动画
    test2() {
        return (
            <Animated.View style={[styles.demo, {
                opacity: this.state.fadeInOpacity,
                transform: [{
                    rotateZ: this.state.rotation.interpolate({
                        inputRange: [0, 2],

                        outputRange: ['0deg', '360deg']
                    })
                }]
            }]}>
                <Animated.Text style={{
                    fontSize: this.state.fontSize.interpolate({
                        inputRange: [0, 1],
                        outputRange: [12, 26]
                    })
                }}>
                    我是睡哦
                </Animated.Text>
                <Text style={styles.text}>悄悄的</Text>
            </Animated.View>
        )
    }

    //调用时间组件测试+提示消息
    test3() {
        return (
            <View style={{flex: 1}}>
                <Button title='时间对话框' onPress={() => {
                    ToastAndroid.show('你正在挑时间哦 喵', ToastAndroid.LONG);
                    TimePickerAndroid.open({
                        hour: 22,
                        minute: 30,
                        is24Hour: true,
                    }).then(({action, hour, minute}) => {
                        if (action !== TimePickerAndroid.dismissedAction) {
                            alert(hour + ':' + minute);
                        }
                    })
                }}/>
            </View>
        )
    }
    //震动
    test4() {

        return (
            <View>
                <Button title='想震动一下吗?'
                        onPress={() => {
                            Vibration.vibrate([0, 1000], false)
                        }}
                >
                </Button>

            </View>
        )
    }
    //折线图
    test5() {
        const option = {
            //点击某一个点的数据的时候，显示出悬浮窗
            tooltip: {
                trigger: 'axis'
            },
            //可以手动选择现实几个图标
            legend: {
                data: ['比特币', '人民币']
            },
            //各种表格
            toolbox: {
                //改变icon的布局朝向
                //orient: 'vertical',
                show: true,
                showTitle: true,
                feature: {
                    //show是否显示表格，readOnly是否只读
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        //折线图  柱形图    总数统计 分开平铺
                        type: ['line', 'bar', 'stack', 'tiled'],
                    },

                }
            },
            xAxis: [
                {
                    //就是一月份这个显示为一个线段，而不是数轴那种一个点点
                    boundaryGap: true,
                    type: 'category',
                    name: '时间',

                    data: ['1天', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '销量(kg)'
                }
            ],
            //图形的颜色组
            color: ['rgb(249,159,94)', 'rgb(67,205,126)'],
            //需要显示的图形名称，类型，以及数据设置
            series: [
                {
                    name: '比特币',
                    //默认显
                    type: 'bar',
                    data: this.state.bite
                },
                {
                    name: '人民币',
                    type: 'bar',
                    data: this.state.rmb
                }
            ]
        };
        return (
            <View style={styles.container}>
                <Echarts option={option} height={300} width={600}/>
            </View>
        )
    }

    //抓取数据
    test6() {
        if (this.state.data6 == null) {
            return (<Text>loading...</Text>)
        } else {
            return (
                <ListView
                    dataSource={this.state.data6}      //必须写此属性并且传入dataSource对象
                    renderRow={(rowData) => this.list(rowData)}> //必须写此属性并且传入一个返回component的回调函数
                    >
                </ListView>
            )
        }
    }

    list(rowData) {
        return (
            <View                                //最外层包裹的View
                style={styles.lvRow}>
                <Image                           //左侧显示的图片
                    style={styles.img}
                    source={{uri: rowData.picSmall}}/>
                <View                              //包裹文本的View
                    style={styles.textView}>
                    <Text                            //标题
                        style={styles.textTitle}
                        numberOfLines={1}>
                        {rowData.name}
                    </Text>
                    <Text
                        style={styles.textContent}>
                        {rowData.description}
                    </Text>
                </View>
            </View>
        )
    }
    //本地存储
    test7() {

        LocalStorage.initStorage();
        return (
            <View>
                <TouchableOpacity onPress={() => {
                    LocalStorage.save('one', 'guoliang')
                }}>
                    <Text>储存</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {
                    LocalStorage.load('one', (ret) => {
                        alert(ret)
                    })

                }}>
                    <Text>duqu</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {
                    LocalStorage.remove('one')

                }}>
                    <Text>qingkon</Text>
                </TouchableOpacity>
            </View>
        )
    }
    //抽屉
    test9() {
        var navigationView = (

                <View style={{width:Screen.width,height:Screen.height}}>
                    <TouchableOpacity onPress={() => {
                        this.setState({cont:'游戏详情'})
                    }}>
                        <View style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Image source={icons.test} style={{width: 25, height: 25}}/>
                            <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>游戏</Text>
                            <TextInput value={'555'}></TextInput>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => {
                        this.setState({cont:'影视详情'})
                    }}>
                        <View style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Image source={icons.test} style={{width: 25, height: 25}}/>
                            <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>影视</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={{width:100,height:100,backgroundColor:'red',position:'absolute',bottom:50,left:30}}>

                    </View>
                </View>
        );
        return (
                <View
                    style={{height:Screen.height,width:Screen.width,backgroundColor:'#fff'}}>
                    <DrawerLayoutAndroid
                        drawerWidth={200}
                        drawerPosition={DrawerLayoutAndroid.positions.Left}
                        renderNavigationView={() => navigationView}>
                        <View style={{flex: 1, alignItems: 'center'}}>
                            <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>{this.state.cont}</Text>
                        </View>
                    </DrawerLayoutAndroid>
                </View>
        );
    }
    render() {
        return(
            this.test3()
        )
    }

}
icons = {
    test: require('./img/u=1290837614,3805990154&fm=27&gp=0.jpg')
}
styles = StyleSheet.create({
    demo: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    text: {
        fontSize: 30
    },
    titleView: {
        height: Platform.OS == 'ios' ? 64 : 44,
        paddingTop: Platform.OS == 'ios' ? 14 : 0,
        backgroundColor: '#ff6400',
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        color: 'white',
        fontSize: 20,
        textAlign: 'center',
    },

    //text6
    lvRow: {
        flex: 1,
        flexDirection: 'row',
        padding: 10,
    },
    textView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 5,
    },

    textTitle: {
        flex: 1,
        textAlign: 'center',
        color: '#f00',
    },

    textContent: {
        flex: 1,
        fontSize: 11,
        color: '#000',
        textAlign: 'center',
    },

    img: {
        height: 55,
        width: 100,
    }
});